<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css"/>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css"/>
<style type="text/css">
    a {
        color: black;
    }

    a:hover {
        text-decoration: none;
    }

    .bgc-w {
        background-color: #fff;
    }
</style>
<!--vue脚本库-->
<script type="text/javascript"
        src="/api-ui/static/js/vue/vue-3.2.4.global.js">
</script>
<!--axios脚本库-->
<script type="text/javascript"
        src="/api-ui/static/js/vue/axios-0.18.0.min.js">
</script>
<!--我们自己封装的axios函数库 -->
<script type="text/javascript"
        src="/api-ui/static/js/vue/axios-helper.js">
</script>
<body id="app">
<div class="row" style="padding-top: 10px;">
    <div class="col-md-2">
        <h1 style="font-size: 24px; margin: 0;" class="">用户登陆记录</h1>
    </div>
    <div class="col-md-10 text-right">
        <a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
            disabled="disabled">用户登陆记录</a>
    </div>
</div>
<div class="row" style="padding-top: 15px;">
    <div class="col-md-12 thistable">
        <div class="bgc-w box box-primary">
            <!--盒子头-->
            <div class="box-header">
                <h3 class="box-title">
                    <a onclick="javascript:window.print();" class="label label-primary" style="padding: 5px;">
                        <i class="glyphicon glyphicon-print"></i> <span>打印</span>
                    </a>
                </h3>
                <div class="box-tools">
                    <div class="input-group" style="width: 150px;">
                        <input type="text" class="form-control input-sm baseKey"
                               placeholder="查找..." v-model="condition"/>
                        <div class="input-group-btn">
                            <a href="javascript:void(0)" class="btn btn-sm btn-default" @click="queryByCondition"><span
                                    class="glyphicon glyphicon-search" ></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <!--盒子身体-->
            <div class="box-body no-padding">
                <div class="table-responsive">
                    <table class="table table-hover table-striped">
                        <tr>

                            <th scope="col">用户</th>
                            <th scope="col"><span class="paixu thistime">登陆时间
							</span></th>
                            <th scope="col">IP</th>
                            <th scope="col">使用浏览器</th>
                        </tr>

                        <tr v-for="item in list">
                            <td><span>{{item.aoaUser.userName}}</span></td>
                            <td><span>{{item.loginTime}}</span></td>
                            <td><span>{{item.ipAddr}}</span></td>
                            <td><span>{{item.browser}}</span></td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="box-footer no-padding" style="margin-top: -20px;">
                <div style="padding: 5px;">
                    <div id="page"
                         style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
                        <div style="width: 40%; float: left;">
                            <div class="pageInfo" style="margin-left: 5px;">
                                共<span>{{sum}}</span>条 | 每页<span>{{size}}</span>条
                                | 共<span>{{pages}}</span>页
                            </div>
                        </div>
                        <div style="width: 60%; float: left;">
                            <div class="pageOperation">
                                <!--判断是否是第一页  -->
                                <a href="javascript:void(0)" class="btn btn-sm btn-default no-padding tablefirst"
                                   style="width: 30px; height: 20px;" @click="goto(1)">
                                        <span class="glyphicon glyphicon-backward"></span></a>
                                <a href="javascript:void(0)" class="btn btn-sm btn-default no-padding tableup"
                                   style="width: 30px; height: 20px;" @click="previous()">
                                        <span class="glyphicon glyphicon-triangle-left"></span></a>
                                <a href="javascript:void(0)" disabled="disabled" class="btn btn-default no-padding"
                                   style="width: 30px; height: 20px;">
                                    {{page.current}}
                                </a>
                                <!--判断是否是最后一页  -->
                                <a href="javascript:void(0)" class="btn btn-sm btn-default no-padding tabledown"
                                   style="width: 30px; height: 20px;" @click="next()"> <span class="glyphicon glyphicon-triangle-right"></span></a>
                                <a href="javascript:void(0)" class="btn btn-sm btn-default no-padding tablelast"
                                   style="width: 30px; height: 20px;" @click="goMax(maxPage)"> <span class="glyphicon glyphicon-forward"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</body>

    <script type="module">
        Vue.createApp({
            data() {
                return {
                    //用户保存查询得到的角色列表
                    list:[],
                    //总数
                    sum:null,
                    //每页显示记录数
                    size:null,
                    //一共多少页
                    pages:null,
                    //默认分页查询的值
                    page:{
                        current:1,
                        size:10
                    },
                    maxPage:null,
                    condition:null
                }
            },
            created() {
                this.loadList();
            },
            methods: {
                //条件查询
                queryByCondition(){
                    if(this.condition ==null || this.condition==""){
                        alert("查询条件不能为空，否则查询全部呢");
                        this.loadList();
                    }else {
                        requestGet("/api-core/aoaUserLoginRecord/queryList",{
                            page:this.page,
                            userName:this.condition
                        }).then((data)=>{
                            this.list=data.records;
                            this.size=data.size;
                            this.sum=data.total;
                            this.pages=data.pages;
                        })
                    }
                },
                //查询在线用户列表
                loadList(){
                    //查询角色列表
                    requestGet("/api-core/aoaUserLoginRecord/queryList", this.page).then((data)=>{
                        console.info(data);
                        this.list=data.records;
                        this.size=data.size;
                        this.sum=data.total;
                        this.pages=data.pages;
                        //拿最大页码数
                        this.maxPage=Math.ceil(data.total/data.size);
                        console.info("最大页码数",this.maxPage);
                    })
                },
                //跳转指定页码
                goto(num){
                    if(this.page.current==num){
                        alert("当前已是首页");
                        return false;
                    }
                    //设置查询条件中的当前页码
                    this.page.current=num;
                    //查询
                    this.loadList();
                },
                previous(){
                    let cur=this.page.current;
                    cur=(cur-1) < 1 ? 1:(cur-1);
                    //将当前页码数赋值到模型层
                    this.page.current=cur;
                    //重新查询
                    this.loadList();
                },
                next(){
                    let cur=this.page.current;
                    cur=(cur+1) > this.maxPage ? this.maxPage:(cur+1);
                    //将当前页码数赋值到模型层
                    this.page.current=cur;
                    //重新查询
                    this.loadList();
                },
                goMax(num){
                    if(this.page.current==num){
                        alert("当前已是尾页");
                        return false;
                    }
                    //设置查询条件中的当前页码
                    this.page.current=num;
                    //查询
                    this.loadList();
                }
            }
        }).mount("#app");
    </script>
        </div>
    </div>
</div>
